<template>
  <div>
    盲盒商品选择器测试
    <BasicSelectBlindBox
      ref="selectBlindBox"
      :page-size="5"
      :showBtn="false"
      :selected="goodsSelectId"
      @update:complete="handleSelectComplete"
    />
    <n-button type="primary" @click="diySelectGoods">自定义选择商品按钮</n-button>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import BasicSelectBlindBox from '@/components/Shop/SelectBlindBox/BasicSelectBlindBox.vue';

  const goodsSelectValue = ref<object[]>([]);
  const goodsSelectId = ref<number[]>([]);
  const selectBlindBox = ref<InstanceType<typeof BasicSelectBlindBox>>();
  function handleSelectComplete(goods: object[]) {
    console.log(goods, '新增部分');
    goods.forEach((item) => {
      goodsSelectValue.value.push(item);
      goodsSelectId.value.push(item['id']);
    });
    console.log(goodsSelectValue.value, '选择完成');
  }
  function diySelectGoods() {
    console.log('选择商品');
    selectBlindBox.value?.selectGoods();
  }

  onMounted(() => {});
</script>
